<template>
  <div class="aaa">
    <div class="mainClass">
      <template v-for="(item , index) in responseData" :key="item">
        <a-card
          :class="{'rightClass' : index%2 != 0}"
          hoverable
          class="aCrdClass"
        @click="particulars(item.id)">
          <a-avatar shape="square" :src="item.ebCover" :size="99" style="float:left;">
            <template #icon>
              <UserOutlined/>
            </template>
          </a-avatar>
          <div class="textClass">{{ item.ebTitle }}</div>
          <div class="dateTimeClass">{{ item.ebCreatetime }}</div>
        </a-card>
      </template>
      <div class="pageClass" :class="{'pageClass1': responseData.length%2!= 0}">
        <a-pagination hideOnSinglePage v-model:current="current" :total= total show-less-items @change="getDataList"/>
      </div>
    </div>
  </div>
</template>

<script>

import {ref} from "vue";
import {getAnnouncementList, getClssify} from "@/api/module/experiment";
import router from "@/route";

export default {
  setup() {
    const current = ref(1)
    const responseData = ref([])
    const total = ref()
    // 获取专业分类数据
    const getDataList = (value) => {
      let param = {
        "pageNum": current.value,
        "pageSize": 10
      }
      getAnnouncementList(param).then((response) => {
        responseData.value = response.data.record
        total.value = response.data.total
      })
    }

    // 查看公告详情
    const particulars = (value)=>{
      // /scan/comm/details/details
      localStorage.setItem("aaa","3")
      router.push({
        path:'/scan/comm/details/details',
        query:{
          id:JSON.stringify(value)
        }
      })
    }

    getDataList();
    return {
      current,
      getDataList,
      responseData,
      total,
      particulars,
    }
  }
}

</script>

<style scoped>
.aaa {
  width: 100%;
  height: 100%;
  background-color: #f8f9fd;
  float: left;
  margin-top: 2%;
}

.mainClass {
  width: 80%;
  height: 100%;
  background-color: #f8f9fd;
  margin-left: 10%;
  float: left;
  margin-bottom: 2%;
  margin-top: 2%;
}

/*}*/
.aCrdClass {
  width: 48%;
  float: left;
  margin-bottom: 2%;
}

.rightClass {
  width: 48%;
  float: right;
  margin-bottom: 2%;
}

.textClass {
  font-size: 25px;
  float: left;
  margin-top: 1%;
  margin-left: 5%;

  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dateTimeClass {
  font-size: 18px;
  float: left;
  margin-top: 1%;
  margin-left: 5%;

  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pageClass {
  float: right;
}

.pageClass1 {
  margin-top: 10%;
}
</style>
